<template>
	<view>

		<view class="nav">
			<image class="nav-bg" src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-bg.png"
				mode="" />
			<view class="pk">
				<!-- <uni-icons type="arrow-left" color="white" size="30" @click="goBack"></uni-icons> -->
				<image class="arrow" src="/static/icons/nav-arrow.png" @click="goBack()" />
				<!-- <text>碰一碰</text> -->
			</view>
		</view>
		<view class="detail-content">
			<view class="topdes">
				<view class="linebg">
					<text class="num">{{pengnum}}</text>
					<text class="label">碰</text>
				</view>
				<view class="prize-list">
					<view class="prize-item" v-for="(item,i) in detail.products" :key="item.id"
						@click="showDialogImage(item)">
						<view class="prize-img">
							<image :src="item.image" />
							<view class="tag" v-if="item.number_start ==item.number_end">{{ item.number_start }}碰</view>
							<view class="tag" v-else-if="item.number_end > 0">{{ item.number_start }}-{{ item.number_end }}碰</view>
              <view class="tag" v-else-if="item.number_end === 0">{{ item.number_start }}碰以上</view>
						</view>
						<view class="prize-title">{{ item.name }}</view>
						<view class="price">¥{{ item.price }}</view>
					</view>
				</view>
			</view>
			<view class="pailist">
				<view class="paiitem" :class="item.classname" v-for="(item,i) in detail.kapailist" :key="i"
					@click="start(i,item.id)">
					<template v-if="item.id==detail.wish">
						<view v-if="!item.classname|| item.classname=='scale'" class="wish">
							<text class="wishtxt">
								{{item.name}}
							</text>
						</view>
					</template>
					<template v-else>
						<image :src="item.image" v-if="!item.classname|| item.classname=='scale'" class="cover"></image>
					</template>
					<view class="end" v-if="item.ispeng"></view>
				</view>

				<view class="items" v-for="item in (10 - detail.kapailist.length)" :key="item">
				</view>
				<view class="guize">
					<view class="guize1">
						<text class="text1">许愿卡：{{detail.wishname}}</text>
						<text class="text2">可补次卡：{{wishtotal}}</text>
					</view>
					<view class="guize2">
						<text class="text1">碰一碰</text>
						<text class="text2">可补次卡：{{counttotal}}</text>
					</view>
					<!-- <image class="guize1" src="/src/static/pengyipeng/guize1.png"></image> -->
					<!-- <image class="guize2" src="/src/static/pengyipeng/guize2.png"></image> -->
				</view>
			</view>
			<view class="bukabtn">
				<button class="buka" @click="buka">补卡{{num}}</button>
				<button class="quankai" @click="quankai">全开</button>
			</view>
		</view>
		<van-dialog use-slot :show="isCouponModalVisible" :show-confirm-button="false" width="312">
			<prize-dialog-content :image="dialogItem.image" :name="dialogItem.name" :price="dialogItem.price"
				v-on:close="closeCouponModal" />
		</van-dialog>
		<van-dialog use-slot :show="giftsDialogVisible" :show-confirm-button="false" width="312">
			<gifts-dialog-content :gifts="prize" :ishidebtn="true" v-on:close="closeGiftsDialog" />
		</van-dialog>
	</view>
</template>

<script lang="ts">
	export default {
		name: 'PKdetail'
	}
</script>

<script lang="ts" setup>
	import PrizeDialogContent from '@/wxcomponents/prize-dialog-content'
	import GiftsDialogContent from '@/wxcomponents/gifts-dialog-content'
	import moment from 'moment'
	import { onLoad, onReachBottom, onPullDownRefresh, onShow } from "@dcloudio/uni-app"
	import { ref, reactive, onUnmounted, computed, watch } from 'vue'
	import { loadWaiting, deal, loadDetail } from "@/api/touch"
	const giftsDialogVisible = ref(false)
	let num = ref(0);
	let pengnum = ref(0);
	let detail = ref({
		products: [],
		kapailist: [],
		count: 0,
		game_id: "",
		id: "",
		next_inc: 0,
		remain: 0,
		state: "",
		wish: 0,
		prize: null,
		wishname: ""
	})
	let prize = ref([])
	let dialogItem = ref({
		image: "",
		name: "",
		price: "",

	});
	let gifts = ref([])
	let gameId = ref(0);
	let counttotal = ref(0);
	let wishtotal = ref(0);
	let isCouponModalVisible = ref(false);
	let isrepeat = ref(false);
	function closeGiftsDialog() {
		giftsDialogVisible.value = false
		uni.navigateBack(-1)
		// TODO 这里需要对弹窗内的动作做更细分的判断
	}
	function goBack() {
		uni.navigateBack(-1)
	}
	// 洗牌抽卡
	async function buka(isstart : false) {
		if (notflippNum() < 0) {
			if (num.value > 0 && (detail.value.remain + detail.value.next_inc) == num.value) {
				const params = {
					game_id: parseInt(gameId.value)
				}
				const { code, data } = await deal(params)
				for (let i = 0; i < data.card_items.length; i++) {
					if (i != data.card_items.length - 1) {
						data.card_items[i].ispeng = false;
						data.card_items[i].classname = "";
					} else {
						data.card_items[i].ispeng = false;
						data.card_items[i].classname = "item";
					}
				}
				detail.value.kapailist = data.card_items
				detail.value.remain = data.remain //可以补卡的次数
				detail.value.wish = data.wish //许愿卡
				detail.value.next_inc = data.next_inc //许愿卡
				if (data.prize) {
					detail.value.prize = data.prize
				}

				num.value = data.remain //剩余补卡次数
				pengnum.value = data.count //已碰的次数
				counttotal.value = 0
				wishtotal.value = 0
			}
			else {
				if (isstart) {
					if (detail.value.prize) {
						prize.value = [detail.value.prize]
						giftsDialogVisible.value = true
					}
					else {
						uni.showToast({
							title: "错误"
						})
					}
				}
			}
		}
	}
	function notflippNum() {
		let index = -1;
		index = detail.value.kapailist.findIndex(item => {
			return item['classname'] == 'item'
		})
		return index
	};
	function quankai() {
		if (notflippNum() < 0) {
			return
		}
		if (isrepeat.value) {
			uni.showToast({
				title: "请勿重复点击",
				icon: "none"
			})
			return
		}
		isrepeat.value = true
		detail.value.kapailist = detail.value.kapailist.filter(item => {
			if (item.classname == "item") {
				item.classname = "item reversal"
			}
			return item
		})
		setTimeout(() => {
			for (var i = 0; i < detail.value.kapailist.length; i++) {
				if (detail.value.kapailist[i]['classname'] == "item reversal") {
					detail.value.kapailist[i]['classname'] = ""
					if (detail.value.kapailist[i].id == detail.value.wish) {
						if (num.value + 1 <= detail.value.next_inc + detail.value.remain) {
							++num.value
							++wishtotal.value
						}
					}
				}
			}
			for (var i = 0; i < detail.value.kapailist.length; i++) {
				if (!detail.value.kapailist[i]['ispeng'] && detail.value.kapailist[i]['classname'] == "") {
					var one = detail.value.kapailist[i]
					for (var j = 0; j < detail.value.kapailist.length; j++) {
						var second = detail.value.kapailist[j]
						if (i != j && !second.ispeng && one.id == second.id && second['classname'] == '') {
							detail.value.kapailist[i]['ispeng'] = true
							detail.value.kapailist[j]['ispeng'] = true
							detail.value.kapailist[i]['classname'] = "scale"
							detail.value.kapailist[j]['classname'] = "scale"
							if (num.value + 1 <= detail.value.next_inc + detail.value.remain) {
								++num.value
								++counttotal.value
							}
							++pengnum.value
							break;
						}
					}
				}
			}
			if (notflippNum() < 0) {
				setTimeout(() => {
					if (detail.value.prize) {
						prize.value = [detail.value.prize]
						giftsDialogVisible.value = true
					}
				}, 200)
			}
			isrepeat.value = false
			
		}, 500)
	}
	// 开始翻转
	function start(i : number, id : number) {
		if (detail.value.kapailist[i]['classname'] == "item reversal" || detail.value.kapailist[i]['classname'] == "" || detail.value.kapailist[i]['classname'] == "scale") {
			return
		}
		detail.value.kapailist[i]['classname'] = "item reversal"
		setTimeout(() => {
			detail.value.kapailist[i]['classname'] = ""
			if (id == detail.value.wish) {
				if (num.value + 1 <= detail.value.next_inc + detail.value.remain) {
					++num.value
					++wishtotal.value
				} 
			}
			var kaindex = detail.value.kapailist.findIndex((item, index) => {
				return i != index && !item.ispeng && item.id == detail.value.kapailist[i].id && item.classname == ''
			})
			if (kaindex > -1) {
				setTimeout(() => {
					detail.value.kapailist[kaindex]['ispeng'] = true
					detail.value.kapailist[i]['ispeng'] = true
					detail.value.kapailist[kaindex]['classname'] = "scale"
					detail.value.kapailist[i]['classname'] = "scale"
					if (num.value + 1 <= detail.value.next_inc + detail.value.remain) {
						++num.value
						++counttotal.value
					} 
					++pengnum.value
				}, 200)
			}
			// 准备开奖
			if (notflippNum() < 0) {
				setTimeout(() => {
					if (detail.value.prize) {
						prize.value = [detail.value.prize]
						giftsDialogVisible.value = true
					}
				}, 200)
			}
		}, 410)
	}
	const shareData = computed(() => { // 分享的数据
		return {
			title: detail.value.name,
			imageUrl: detail.value.main_photo
		}
	})
	onLoad(async (options : any) => {
		const id = options.id || 0
		if (!id) {
			uni.showToast({
				title: 'id参数错误',
				icon: 'none'
			})
			return
		}
		gameId.value = id
		getDetail()
		getloadWaiting()
		uni.$mpShare = shareData.value // 修改uni.$mpShare的值

	});
	onShow(() => {
		uni.$mpShare = shareData.value // 修改uni.$mpShare的值
	})
	function showDialogImage(item) {
		dialogItem.value = {
			image: item.image,
			name: item.name,
			price: item.price,
		}
		isCouponModalVisible.value = true
	}

	function closeCouponModal() {
		isCouponModalVisible.value = false;
	}
	async function getDetail() {
		const params = {
			game_id: gameId.value
		}
		const { code, data } = await loadDetail(params)

		// 商品价格从单位分转为元
		for (let i = 0; i < data.products.length; i++) {
			data.products[i].price = (data.products[i].price / 100).toFixed(2)
		}
		detail.value.products = data.products
	}
	async function getloadWaiting() {
		const params = {
			game_id: gameId.value
		}
		const { code, data } = await loadWaiting(params)
		for (let i = 0; i < data.card_items.length; i++) {
			data.card_items[i].ispeng = false;
			data.card_items[i].classname = "item";
		}
		detail.value.kapailist = data.card_items
		detail.value.remain = data.remain //可以补卡的次数
		num.value = data.remain //剩余补卡次数
		pengnum.value = data.count //已碰的次数
		detail.value.wish = data.wish //许愿卡
		detail.value.next_inc = data.next_inc //许愿卡
		if (data.prize) {
			detail.value.prize = data.prize
		}
		detail.value.wishname = data.wish_item.name //已碰的次数
	}
</script>



<style lang="scss">
	@import 'src/static/scss/maincommon';

	.bukabtn {
		width: 92%;
		position: absolute;
		left: 4%;
		bottom: 30rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
	}

	.buka::after,
	.quankai::after {
		margin: 0;
		padding: 0;
	}

	.buka {
		margin: 0;
		padding: 0;
		flex: 1;
		margin-right: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 28rpx;
		background: linear-gradient(to right, #205DE9, #8E6CF4);
	}

	.quankai {
		margin: 0;
		padding: 0;
		height: 80rpx;
		width: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 28rpx;
		background: linear-gradient(to right, #205DE9, #8E6CF4);
	}

	.pailist {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.guize {
			flex: 1;
			display: flex;
			flex-direction: column;
			height: 196rpx;
			justify-content: space-between;
			width: 47.5%;

			.guize1,
			.guize2 {
				width: 100%;
				height: 92rpx;
				background: url("/static/pengyipeng/guize1.png") no-repeat;
				background-repeat: no-repeat;
				background-size: 100%;
				background-position: center;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				padding: 15rpx 20rpx 20rpx 25rpx;
				box-sizing: border-box;

				.text1 {
					color: #ffffff;
					font-size: 24rpx;
				}

				.text2 {
					color: #ffffff;
					font-size: 20rpx;
				}
			}

			.guize2 {
				background: url("/static/pengyipeng/guize2.png") no-repeat;
				background-repeat: no-repeat;
				background-size: 100%;
				background-position: center;
			}
		}

		.paiitem:nth-child(4n+4) {
			margin-right: 0%;
		}

		.items:nth-child(4n+4) {
			margin-right: 0%;
		}

		.scale {
			animation: scale 0.5s linear;
			transform-style: preserve-3d;
		}

		.paiitem {
			display: flex;
			width: 23%;
			margin-right: 2.5%;
			margin-bottom: 2.5%;
			align-items: center;
			justify-content: center;
			height: 196rpx;
			position: relative;

			.wish {
				width: 100%;
				height: 196rpx;
				font-size: 28rpx;
				background-color: #8E6CF4;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;

				.wishtxt {
					display: inline-block;
					width: 28rpx;
				}
			}

			.cover {
				max-width: 166rpx;
				height: 196rpx;
				border-radius: 10rpx;
				// animation: scale 0.5s linear;
				// transform-style: preserve-3d;
			}


			.end {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 2;
				border-radius: 10rpx;
			}
		}

		.item {
			background: url("/static/pengyipeng/kapai.png") no-repeat;
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center;
		}

		.items {
			display: flex;
			width: 23%;
			margin-right: 2.5%;
			margin-bottom: 2.5%;
			align-items: center;
			justify-content: center;
			height: 196rpx;
			border-radius: 10rpx;
			border: solid 2rpx #575757;
			box-sizing: border-box;
		}

		.reversal {

			animation: scroll 0.5s linear;
			// transition: transform 0.5s ease;
			/* 平滑过渡效果 */
			transform-style: preserve-3d;
			/* 保持3D变换 */
		}

		.reversal:hover {
			// animation: scroll 0.5s linear;

			/* 鼠标悬停时翻转 */
		}
	}

	@keyframes scale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.3);
		}

		100% {
			transform: scale(1);
			/* 根据内容宽度调整 */
		}
	}

	@keyframes scroll {
		0% {
			transform: rotateY(0);
		}

		20% {
			transform: rotateY(80deg);
		}

		50% {
			transform: rotateY(20deg);
		}

		70% {
			transform: rotateY(80deg);
		}

		100% {
			transform: rotateY(0deg);
			/* 根据内容宽度调整 */
		}
	}

	.detail-content {
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
	}

	.prize-list {
		display: flex;
		overflow: scroll;
		flex: 1;

		.prize-item {
			margin: 0 20rpx;
			position: relative;

			.prize-img {
				width: 150rpx;
				height: 156rpx;
				padding: 20rpx;
				background-image: url("~@/static/dongli-game.png");
				background-size: contain;
				background-repeat: no-repeat;

				image {
					width: 150rpx;
					height: 150rpx;
				}

				.tag {
					height: 40rpx;
					// width: 60rpx;
          min-width: 60rpx;
					position: absolute;
					top: 20rpx;
					border-radius: 10rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 40rpx;
					color: #ffffff;
					background: linear-gradient(90deg, rgba(225, 116, 237, 1) 0%, rgba(47, 118, 236, 1) 100%);
				}
			}

			.prize-title {
				width: 190rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #ffffff;
				font-size: 18rpx;
			}

			.price {
				font-size: 20rpx;
				color: #ECA2F5;
			}
		}
	}

	.nav {
		width: 100%;
		height: 180rpx;
		color: #FFF;
		line-height: 300rpx;
		position: relative;

		.nav-bg {
			width: 100%;
			height: 200rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.pk {
			padding-left: 40rpx;
			position: relative;
			z-index: 100;

			.arrow {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
		}
	}

	.topdes {
		width: 100%;
		min-height: 390rpx;
		background-image: url("/static/pengyipeng/rewardbg.png");
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;

		.linebg {
			width: 88rpx;
			height: 284rpx;
			margin-right: 20rpx;
			background: url("/static/pengyipeng/linebg.png");
			background-position: 0;
			background-repeat: no-repeat;
			background-size: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;

			.num,
			.label {
				color: #ffffff;
				font-weight: 600;
				font-size: 40rpx;
			}

			.label {
				margin-top: 20rpx;
			}

		}

	}
</style>